import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// https://github.com/AnleSu/select_text_item/blob/master/setting_page_common/lib/select_text_item.dart
/// 设置项控件
class SettingSectionItem extends StatelessWidget {
  const SettingSectionItem(
      {Key? key,
      required this.title,
      this.onTap,
      this.content = "",
      this.textAlign = TextAlign.start,
      this.titleStyle,
      this.contentStyle,
      this.height,
      this.isShowArrow = true,
      this.imageName,
      this.rightWidget})
      : super(key: key);

  final GestureTapCallback? onTap;
  final String title;
  final String content;
  final TextAlign textAlign;
  final TextStyle? titleStyle;
  final TextStyle? contentStyle;
  final double? height;
  final bool isShowArrow; //是否显示右侧箭头
  final String? imageName; //左侧图片名字 不传则不显示图片
  final Widget? rightWidget;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: height ?? 96.h,
        padding: EdgeInsets.only(left: 32.w, right: 32.w),
        width: double.infinity,
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                //下面的分割线 width 这个参数应该是控制分割线高度的
                bottom: Divider.createBorderSide(context,
                    color: const Color(0xFFEEEEEE), width: 2.h))),
        child: Row(
          children: <Widget>[
            imageName == null
                ? Container()
                : Image.asset(
                    '$imageName',
                    width: 44,
                    height: 44,
                  ),
            Text(title,
                style: TextStyle(
                  color: const Color(0xFF333333),
                  fontSize: 32.sp,
                ).merge(titleStyle)),
            Expanded(
              child: Text(content,
                  textAlign: textAlign,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                        fontSize: 28.sp,
                        color: const Color(0xFF999999),
                      ).merge(contentStyle)),
            ),
            rightWidget ?? Container(),
            isShowArrow
                ? Image(
                    image: const AssetImage(
                        'assets/images/icon_segue_arrow_grey.png'),
                    width: 48.h,
                    height: 48.h,
                    fit: BoxFit.contain,
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}
